//轮播初始化
function initBanner() {
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true, //可选选项，自动滑动
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true, //点击退回
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
}
// initBanner()
/**
 * 获取banner轮播数据
 *   接口调用 技术选型
 *     axios库
 *       1. 返回promise对象
 */
function showBanner() {
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/banner'
    }).then(response => {
        let data = response.data
        if (data.resultCode == 1) {
            let list = data.resultInfo.list
            // console.log(list);
            test1(list)
            //初始化要在动态渲染后
            initBanner()
        }
    })

}
showBanner()

//轮播动态渲染
function test1(list) {
    let str = list.map(item => {
        return ` <div class="swiper-slide">
                    <img src="${item.url}" alt="${item.content}">
                 </div> `
    })
    let swiper = document.querySelector('.swiper-wrapper')
    swiper.innerHTML = str
}

//调用商品列表接口
// *        method:get
// *        url: http://api.yuguoxy.com/api/shop/list
// *        参数 pageSize=8  每页数据条数
// *             pageNo=1  页号
// *         响应数据

let pageNo = 1 //页号
let strlist = ''
function loadProduct(pageNo) {
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/list',
        params: {
            pageSize: 8,     //每页数据条数
            pageNo     //当前页号
        }
    }).then(response => {
        let data = response.data
        if (data.resultCode == 1) {
            let list = data.resultInfo.list  //商品列表 
            // console.log(list);
            showProductList(list)
        }
    })
}
loadProduct()
//动态渲染

let content = document.querySelector('.content')
function showProductList(list) {
    let str = list.map(item => {
        return ` <div class="product" onclick="toDetail(${item.id})" >
                    <img src="${item.picture}" alt="">
                    <div class="seleproduct">
                        <p>${item.shop}</p>
                        <p><span>￥${item.price}</span> 1人买</p>
                    </div>
                </div>`
    }).join('')
    strlist += str
    content.innerHTML = strlist
}

//加载更多
function more() {
    let on = document.querySelector('.on')
    on.onclick = function () {
        loadProduct(++pageNo)
    }
}
more()

//回到顶部
function toTop(top) {
    let to = document.querySelector('.totop')
    to.onclick = function () {
        document.documentElement.scrollTop = top
    }
}
toTop(0)

//点击商品跳转到详情页面
function toDetail(id) {
    location.href = '../pages/detail.html?id=' + id
}

//搜索商品跳转到相应商品页面
function toSearch() {
    $('input[name="pt"]').on('click', function (e) {
        e.preventDefault()
        let value = $('input[name="ps"]').val()
        location.href = '../pages/search.html?keyword=' + encodeURI(value)
    })
}
toSearch()
//点击导航，跳转相应页面
function toNav(index){
        axios({
           method:'get',
            url:'http://api.yuguoxy.com/api/shop/category/list',
        }).then(response=>{
            let data=response.data
            if(data.resultCode==1){
                let list=data.resultInfo.list
                let id=list[index].id
                location.href='../pages/nav.html?id='+id
               }
        })
        
    }